<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<title>列表</title>
	
	<!-- 基本字典-->
	<script type="text/javascript" src="https://admin.mini-ease.com/upload/sys/dict.json"></script>
	
	<!-- jQuery  -->
    <script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>

	<!-- momentjs -->
    <script type="text/javascript" src="/static/plugins/moment/moment-with-locales.js"></script>
	
	<!-- bootstrap5 -->
	<link href="/static/plugins/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" media="all" />
	<script src="/static/plugins/bootstrap/5.1.3/js/bootstrap.bundle.min.js" charset="utf-8"></script>

	<!-- angularjs -->
    <script type="text/javascript" src="/static/plugins/angular/1.5.0/angular.min.js"></script>
	<!-- angular-moment-picker -->
	<link href="/static/plugins/angular/extends/angular-moment-picker/angular-moment-picker.min.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="/static/plugins/angular/extends/angular-moment-picker/angular-moment-picker.min.js"></script>
    
	<!-- daterangepicker -->
	<link href="/static/plugins/bootstrap/extends/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="/static/plugins/bootstrap/extends/daterangepicker/daterangepicker.js"></script>
	<!-- angular-ng-bs-daterangepicker -->
    <script type="text/javascript" src="/static/plugins/angular/extends/angular-daterangepicker/angular-daterangepicker.min.js"></script>

	<!-- hui icon  -->
	<link rel="stylesheet" type="text/css" href="/static/plugins/h-ui/iconfont/1.0.8/iconfont.css" />
	<!-- alibaba iconfont -->
	<link rel="stylesheet" href="/static/css/icon/iconfont.css" media="all" />
	
	<!-- layui  -->
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- ysui -->
	<link href="/static/plugins/ysui/1.0.0/css/ysui.css" rel="stylesheet" media="all" />
	
	<!-- YS-UI -->
	<script th:inline="javascript">
	var dto = [[${dto}]];
	</script>
	<script type="text/javascript" src="/static/plugins/ysui/1.0.0/js/extends/YsGrid.js"></script>
	<script type="text/javascript" src="/static/plugins/ysui/1.0.0/js/YsGridBtn.js"></script>
	<script type="text/javascript" src="/static/plugins/ysui/1.0.0/js/YsGridDbClick.js"></script>
	<script type="text/javascript" th:src="${js}"></script>

	<style>
	.form-label-ys-search {width: 100px !important; white-space: nowrap; font-size: 14px; height: 30px; line-height: 30px; margin-bottom: 0px !important;}
	.form-control-ys-search {width: calc(100% - 100px); height: 30px; line-height: 30px;}
	.form-select-ys-search {width: calc(100% - 100px); height: 30px; line-height: 30px; padding-top: 0 !important;}
	.ml-2 {margin-left: 2px;}
	
	.form-control-ys-in-grid {width: 100%; height: 30px; line-height: 30px; font-size: 12px;}
	.form-select-ys-in-grid {width: 100%; height: 30px; line-height: 30px; font-size: 12px; padding: 0px 5px !important;}
	
	.ys-table-cell-editable {padding: 0 !important;}
	</style>

	<style>
	table {border-collapse: collapse;}
	.sticky-table {
		overflow: auto;
		width: 100%;
	}
	
	.sticky-table td, .sticky-table th {
	    /* 设置td,th宽度高度 */
	    border: 1px solid #c7d8ee;
	    min-width: 50px;
	    height: 30px;
	    /*边框线，不会随着滑动变化而滑动 start*/
	    outline-color: #c7d8ee;
	    outline-style: solid;
	    outline-width: 1px;
	    /*边框线，不会随着滑动变化而滑动 start*/
	}
	.sticky-table th {
	    position: sticky;
	    top: 0; /* 首行永远固定在头部  */
	    background-color: #eaf4ff; /*设置表头背景色*/
	}
	
	/*第一行*/
	.sticky-table th:first-child{
	    z-index: 888 !important;
	    width: 50px !important;
	}
	/*第一列*/
	.sticky-table th:first-child, .sticky-table td:first-child {
	    position: sticky;
	    left: 0; /* 首列永远固定在左侧 */
	    z-index: 1;
	    background-color: #eaf4ff;
	    text-align: center;
	}
	</style>
</head>
<body style="padding: 10px 0px;" ng-app="myApp" ng-controller="mainCtrl" ng-cloak>
<div ng-controller="mainSelfCtrl">
	<!-- 树面板【start】 -->
	<div ng-class="{'tree_lft_show': templateType == 2,'tree_lft_hide': templateType != 2}">
		<div style="overflow: auto; height: 100%;">
			<div style="padding: 5px;">
				<div ng-if="tree.icons_top.length > 0"><i class="iconfont" ng-repeat="item in tree.icons_top" ng-class="item.icon" ng-click="tree.clickTop(item.event)"></i></div>
				<div id="accordion_{{item.id}}" ng-repeat="item in tree.data" ng-include="'normalTree'" ng-init="item = item">
				</div>
			</div>
		</div>
	</div>
	<!-- 树面板【end】 -->
	<!-- 表格面板【start】 -->
	<div ng-class="{'tree_rgt_show': templateType == 2,'tree_rgt_hide': templateType != 2}">
		<div class="container" style="max-width: 100% !important;">
			<div>
				<form action="">
					<div class="row">
						<!-- 循环搜索条件【start】 -->
						<div class="col-sm-12 col-sm-6 col-md-2 mb-2" ng-repeat="condition in conditionArr | limitTo : 6">
							<div class="d-inline-flex align-items-center" ng-if="condition.type == 't_text'">
								<label class="form-label form-label-ys-search">{{condition.name}}：</label>
								<input type="text" class="form-control form-control-ys-search" name="{{condition.code}}" required ng-model="condition.value">
							</div>
							<div class="d-inline-flex align-items-center" ng-if="condition.type == 't_dropdown'" style="width: 100%;">
								<label class="form-label form-label-ys-search">{{condition.name}}：</label>
								<select class="form-select form-select-sm form-select-ys-search" ng-options="item.value as item.name for item in MAP_DICT[condition.dictKeyBase]" ng-model="condition.value" name="{{condition.code}}">
								</select>
							</div>
							<div class="d-inline-flex align-items-center" ng-if="condition.type == 't_date' && condition.rangeType != 't_between'" style="width: 100%;">
								<label class="form-label form-label-ys-search">{{condition.name}}：</label>
								<input type="text" class="form-control form-control-ys-search"
									moment-picker="condition.value" format="YYYY-MM-DD" start-view="day"
									ng-model="condition.value">
							</div>
							<div class="d-inline-flex align-items-center" ng-if="condition.type == 't_date' && condition.rangeType == 't_between'" style="width: 100%;">
								<label class="form-label form-label-ys-search">{{condition.name}}：</label>
								<input date-range-picker type="text" separator="~" class="form-control form-control-ys-search" style="font-size: 12px; padding-left: 0;" readonly ng-model="condition.value" options="{locale: {separator: ' ~ ', applyLabel: '确定', cancelLabel: '取消', format: 'YYYY-MM-DD'}}" />
							</div>
							<div class="d-inline-flex align-items-center" ng-if="condition.type == 't_year' && condition.rangeType != 't_between'" style="width: 100%;">
								<label class="form-label form-label-ys-search">{{condition.name}}：</label>
								<input type="text" class="form-control form-control-ys-search"
									moment-picker="condition.value" format="YYYY" start-view="year"
									ng-model="condition.value">
							</div>
						</div>
						<!-- 循环搜索条件【end】 -->
					</div>
					<div class="row">
						<div class="col-sm-12 col-sm-6 col-md-6">
							<div class="d-inline-flex align-items-center">
								<button class="btn btn-outline-primary btn-sm" type="button" style=" white-space: nowrap;" data-bs-toggle="offcanvas" data-bs-target="#more_condition" ng-if="conditionArr.length > 6">更多查询条件&gt;&gt;</button>
								<button class="btn btn-primary btn-sm ml-2" type="button" ng-click="loadPage(1)"><i class="Hui-iconfont">&#xe665;</i>查询</button>
								<button class="btn btn-danger btn-sm ml-2" type="button" ng-click="clearConditions()"><i class="Hui-iconfont">&#xe6a6;</i>清空</button>
							</div>
						</div>
						<div class="offcanvas offcanvas-start" id="more_condition">
							<div class="offcanvas-body">
								<div class="row">
									<!-- 循环搜索条件-更多【start】 -->
									<div class="col-sm-12 col-sm-12 col-md-12 mb-2" ng-repeat="condition in conditionArr" ng-if="$index > 5">
										<div class="d-inline-flex align-items-center" ng-if="condition.type == 't_text'">
											<label class="form-label form-label-ys-search">{{condition.name}}：</label>
											<input type="text" class="form-control form-control-ys-search" name="{{condition.code}}" required ng-model="condition.value">
										</div>
										<div class="d-inline-flex align-items-center" ng-if="condition.type == 't_dropdown'" style="width: 100%;">
											<label class="form-label form-label-ys-search">{{condition.name}}：</label>
											<select ng-options="item.value as item.name for item in MAP_DICT[condition.dictKeyBase]" ng-model="condition.value" name="{{condition.code}}" class="form-select form-select-sm form-select-ys-search">
											</select>
										</div>
										<div class="d-inline-flex align-items-center" ng-if="condition.type == 't_date' && condition.rangeType != 't_between'" style="width: 100%;">
											<label class="form-label form-label-ys-search">{{condition.name}}：</label>
											<input type="text" class="form-control form-control-ys-search"
												moment-picker="condition.value" format="YYYY-MM-DD" start-view="day"
												ng-model="condition.value">
										</div>
										<div class="d-inline-flex align-items-center" ng-if="condition.type == 't_date' && condition.rangeType == 't_between'" style="width: 100%;">
											<label class="form-label form-label-ys-search">{{condition.name}}：</label>
											<input date-range-picker type="text" separator="~" class="form-control form-control-ys-search" style="font-size: 12px; padding-left: 0;" readonly ng-model="condition.value" options="{locale: {separator: ' ~ ', applyLabel: '确定', cancelLabel: '取消', format: 'YYYY-MM-DD'}}" />
										</div>
										<div class="d-inline-flex align-items-center" ng-if="condition.type == 't_year' && condition.rangeType != 't_between'" style="width: 100%;">
											<label class="form-label form-label-ys-search">{{condition.name}}：</label>
											<input type="text" class="form-control form-control-ys-search"
												moment-picker="condition.value" format="YYYY" start-view="year"
												ng-model="condition.value">
										</div>
									</div>
									<!-- 循环搜索条件-更多【end】 -->
								</div>
								<button class="btn btn-primary btn-sm ml-2" type="button" ng-click="loadPage(1)"><i class="Hui-iconfont">&#xe665;</i>查询</button>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div style="margin: 15px 0 5px 0;" ng-controller="btnCtrl">
				<div class="btn-group" ng-repeat="button in buttonArr">
					<button type="button" class="btn btn-outline-success btn-sm" ng-click="bindBtn(button.event)" ng-if="button.type == 1"><i class="iconfont" ng-class="button.icon"></i>{{button.name}}</button>
					<div class="btn-group" ng-if="button.type == 2">
						<button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-bs-toggle="dropdown"><i class="iconfont" ng-class="button.icon"></i>{{button.name}}</button>
						<ul class="dropdown-menu">
							<li><a class="dropdown-item" href="#" ng-repeat="item in button.itemArr" ng-click="bindBtn(item.event)"><i class="iconfont" ng-class="item.icon"></i>{{item.name}}</a></li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="table-responsive-sm table-responsive-md table-responsive-lg table-responsive-xl sticky-table" style="overflow: auto; max-height: 70vh; height: 70vh;" ng-controller="btnCtrl">
				
				<table class="table table-border table-bordered table-sm table-hover table-sort table-responsive table-nowrap" style="font-size: 12px; white-space: nowrap; table-layout: fixed;">
					<thead>
						<tr class="table-primary" style="text-align: center;">
							<th width="25"><input type="checkbox" name="ys_grid_checkbox_all" ng-model="grid.checkAllState" ng-checked="grid.checkAllState == true" ng-click="grid.checkAll()"></th>
							<th ng-repeat="col in colArr" width="{{col.width}}" ng-class="{'th_fixed_left': col.fixed == 'left' || col.fixed == 'right'}" ng-style="col.style" ng-if="col.frontShow != 0">{{col.title}}</th>
						</tr>
					</thead>
					<tbody ng-controller="dbClickCtrl">
						<tr ng-repeat="row in rows" ng-dblclick="doubleClick(row)">
							<td><input type="checkbox" name="ys_grid_checkbox" ng-model="row.checked" ng-checked="row.checked == true"></td>
							<td ng-repeat="col in colArr" style="text-overflow: ellipsis;overflow: hidden; height: 28px; line-height: 28px; padding: 0 0.25rem;" ng-class="{'td_fixed_left': col.fixed == 'left' || col.fixed == 'right'}" ng-style="col.style" ng-if="col.frontShow != 0">
								<span ng-if="col.type == 't_text'" title="{{row[col.field]}}">{{row[col.field]}}</span>
								<span ng-if="col.type == 't_dropdown' || col.type == 't_checkbox'">
									<div ng-repeat="item in MAP_DICT[col.dictKeyBase]" ng-if="item.value == row[col.field]">
										{{item.name}}
									</div>
								</span>
								<span ng-if="col.type == 't_self_define_tpl'" ng-init="path = 'templet_script_' + col.id" ng-include="path">
								</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div>
				<ul class="pagination pagination-sm justify-content-end" style="margin-top: 2px;">
				</ul>
				<ul class="pagination pagination-sm justify-content-end" style="margin-top: 2px;">
					<li class="page-item"><span class="page-link" href="#" style="border: none;">共有数据：{{pagination.totalNum}}条，总页数：{{pagination.totalPage}}页</span></li>
					<li class="page-item">
						<select ng-options="item.size as item.name for item in pagination.optionArr" ng-model="pagination.currentSize" ng-change="loadPage(1)" class="form-select form-select-sm">
						</select>
					</li>
					<li class="page-item"><a class="page-link" href="#" ng-if="pagination.currentPage != 1" ng-click="loadPage(1)">首页</a></li>
					<li class="page-item"><a class="page-link" href="#" ng-if="pagination.currentPage != 1" ng-click="loadPage(pagination.currentPage - 1)">上一页</a></li>
					<li class="page-item" ng-repeat="pager in pagination.pagerArr | limitTo : pagination.totalPage" ng-class="{'active': pager.num == pagination.currentPage}"><a class="page-link" href="#" ng-click="loadPage(pager.num)">{{pager.num}}</a></li>
					<li class="page-item"><a class="page-link" href="#" ng-if="pagination.currentPage != pagination.totalPage" ng-click="loadPage(pagination.currentPage + 1)">下一页</a></li>
					<li class="page-item"><a class="page-link" href="#" ng-if="pagination.currentPage != pagination.totalPage" ng-click="loadPage(pagination.totalPage)">末页</a></li>
				</ul>
			</div>
			
	
			<!-- YS弹出框控件，必须在父控件包裹范围内 -->
			<th:block th:include="include/src :: YsModal"/>
			<!-- YS树控件，必须在父控件包裹范围内 -->
			<th:block th:include="include/src :: YsTree"/>
			<!-- YS弹出框控件，必须在父控件包裹范围内 -->
			<th:block th:include="include/src :: YsModalDropdown"/>
			<!-- YS弹出框（页面）控件，必须在父控件包裹范围内 -->
			<th:block th:include="include/src :: YsModalLink"/>
			<!-- 列表字段自定义控件 -->
			<th:block th:include="include/gird-self-def :: SelfDefTemplet"/>
		</div>
	</div>
</div>
<!-- 表格面板【end】 -->
</body>
</html>
